<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <#include "/common/base.html" >
    <script>

    </script>
</head>
<body class="easyui-layout" style="min-width: 615px;">
    <div data-options="region:'center',fit: true, border: false">
        <div id="user-auth-panel" class="easyui-panel" data-options="fit:'true',border: false" style="padding: 20px;position: relative;left: 30px;">
            <div style="width: 260px;float: left;">
                已拥有的角色：<br>
            <select id="hasAuth" multiple="multiple" style="width: 200px;height: 260px;">
                <#list has as auth>
                    <option value="${auth.id}">${auth.name}</option>
                </#list>
            </select>
            </div>
            <div style="width: 100px;margin-top: 86px;left: 230px;float: left;">
                <a href="#" class="easyui-linkbutton" onclick="addAuth()">==></a>
                <a href="#" class="easyui-linkbutton" style="top: 78px;position: relative;left: -50px;" onclick="removeAuth()"><==</a>
            </div>
            <div style="width: 260px;float: left;">
                不具有的角色：<br>
            <select id="noAuth" multiple="multiple" style="width: 200px;height: 260px;">
                <#list no as auth>
                    <option value="${auth.id}">${auth.name}</option>
                </#list>
            </select>
            </div>
            <p style="position: fixed;top: 310px;left: 47px;">
            <button onclick="saveAuth()" id="save-btn">保存权限</button>
        </div>
    </div>
</body>
<script>
    var $USER_WIN = null;
    $(function () {
        $USER_WIN = $('#user-auth-panel');
        // initPanel();
    })
    function initPanel(){
        $USER_WIN.panel({
            fit: true,
            border: false,
            striped: true,
            idField: 'id',
            loadMsg: '加载中，请稍候',
            rownumbers: true,
            toolbar: [{
                iconCls: 'icon-add',
                text: '增加',
                handler: function(){
                    openWindow('添加用户', '/users/add_index');
                }
            },'-',{
                iconCls: 'icon-edit',
                text: '修改',
                handler: function(){
                    var secRow = $USER_GRID.datagrid('getSelections');
                    if(secRow.length != 1){
                        msg('只能选择1行！');return;
                    }
                    openWindow('添加用户', '/users/update_index?ids='+secRow[0]['id']);
                }
            },'-',{
                iconCls: 'icon-remove',
                text: '删除',
                handler: function(){
                    var ids = [];
                    var secRows = $USER_GRID.datagrid('getSelections');
                    if(secRows.length < 1){
                        msg('至少选择1行！');return;
                    }
                    secRows.forEach(function (a,b,c) {
                        ids.push(a['id']);
                    })
                    confirmDelete(ids);
                }
            },'-',{
                iconCls: 'icon-man',
                text: '授权',
                handler: function(){
                    var id = -1;
                    var secRows = $USER_GRID.datagrid('getSelections');
                    if(secRows.length != 1){
                        msg('请选择1行！');return;
                    }
                    secRows.forEach(function (a,b,c) {
                        id == a['id'];
                    })
                    openWindow('授予用户角色', '/users/auth_index?id='+id);
                }
            }],
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            columns: [[
                {field: 'id', checkbox: true, width: 20},
                {title: '姓名', field: 'name', width: 100},
                {title: '年龄', field: 'age', width: 100},
                {title: '生日', field: 'birth', width: 100, formatter: function (value,row,index) {
                        var date = new Date(value);
                        return date.format("yyyy-MM-dd hh:mm:ss");
                    }},
                {title: '注册时间', field: 'createTime', width: 100, formatter: function (value,row,index) {
                        var date = new Date(value);
                        return date.format("yyyy-MM-dd hh:mm:ss");
                    }}
            ]]
        })
    }
    function addAuth(){
        var hasAuth = $('#hasAuth option:selected');
        hasAuth.each(function(a,b,c){
            var v = $(b).val();
            var t = $(b).text();
            removeRecord('hasAuth', v, t);
            addRecord('noAuth', v, t);
        })
    }
    function removeAuth(){
        var noAuth = $('#noAuth option:selected');
        noAuth.each(function(a,b,c){
            var v = $(b).val();
            var t = $(b).text();
            removeRecord('noAuth', v, t);
            addRecord('hasAuth', v, t);
        })
    }
    function removeRecord(selectId, v) {
        $('#'+selectId+' option[value='+v+']').remove();
    }
    function addRecord(selectId, v, t) {
        $('#'+selectId).append('<option value='+v+'>'+t+'</option>');
    }
    function confirmDelete(ids){
        art.dialog({
            content: '确定要删除吗？',
            ok: function () {
                $.ajax({
                    url: 'delete',
                    type: 'post',
                    data: {idStr: ids.join(',')},
                    success: function(rsp){
                        if(rsp['success']){
                            msg('删除成功', true);
                            closeReload();
                        }else {
                            msg(rsp['info'],true);
                        }
                    },
                    error: function(){msg('删除出错',true);}
                });
            },
            cancelVal: '关闭',
            cancel: true //为true等价于function(){}
        });
    }
    function saveAuth(){
        $('#save-btn').attr('disabled', true);
        art.dialog({
            content: '确定要修改权限吗？',
            ok: function () {
                loading();
                confirmAuth();
            },
            cancel: function(){
                $('#save-btn').attr('disabled', false);
            },
            cancelVal: '关闭'
        });
    }

    function confirmAuth(){
        var checkdIds = [];
        var hasAuth = $('#hasAuth option');
        hasAuth.each(function(a,b,c){
            var v = $(b).val();
            checkdIds.push(v);
        });
        var secRows = parentGetSelections();
        var userId = secRows[0]['id'];
        $.ajax({
            url: 'modifyAuth',
            type: 'post',
            data: {ids: checkdIds.join(','), userId: userId},
            success: function(rsp){
                $('#save-btn').attr('disabled', false);
                if(rsp['success']){
                    msg('操作成功', true);
                }else {
                    msg(rsp['info'],true);
                }
                closeTopLoading();
            },
            error: function(){
                closeTopLoading();
                $('#save-btn').attr('disabled', false);
                msg('操作出错',true);
            }
        });
    }
</script>
</html>